<script setup lang="ts" name="userBottomRight">
import { useAsyncAxios } from '@/utils/asyncFuncStore'
import { useModalStore } from '@/stores/modalStore'
import { useCurrActStroe } from '@/stores/currActStore'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
defineProps<{
  isFollowed: {
    follow: boolean
  }
}>()

const route = useRoute()
const followedId = route.query.id as string

async function starUser() {
  const { likeUser } = useAsyncAxios()
  const { changeData } = useModalStore()
  const { currUser } = storeToRefs(useCurrActStroe())
  const { status, data } = await likeUser(followedId, currUser.value.id)
  changeData({ status, data })
}
function sendMessage() {}
</script>

<template>
  <div class="btn">
    <div class="content">
      <span @click="starUser">
        <BellFilled class="svg" v-if="isFollowed.follow" />
        <Bell class="svg" v-else />
      </span>
      <span @click="sendMessage">
        <ChatSquare class="svg" />
      </span>
    </div>
  </div>
</template>

<style scoped>
.btn {
  position: relative;
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: flex;
    gap: 10px;
    > span > .svg {
      cursor: pointer;
      width: 26px;
      height: 26px;
      color: var(--color3);
    }
  }
}
</style>
